<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			h2 {
				text-align: center;
				background: deepskyblue;
				color: brown;
			}
			
			table {
				width: 80%;
				margin: 20px auto;
				text-align: center;
			}
			
			button {
				width: 100px;
				height: 30px;
				background: orangered;
				color: antiquewhite;
				border: none;
			}
			
			tr img {
				width: 30%;
			}
			
			p {
				text-align: center;
				margin: 20px auto;
			}
			
			.ys {
				background: palegreen;
				height: 300px;
				width: 300px;
				text-align: center;
				border: 3px solid gold;
				border-radius: 20px;
				padding: 20px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				display: none;
			}
			
			tr button {
				width: 50px;
				height: 20px;
			}
			
			.yc {
				display: none;
			}
			#xg{display: none;}
			#gr{float: right;
				margin-right: 30px;}
			#yonghu{position: fixed;
						right:30px;
						top: 30px;
						width: 100px;
						height: 100px;
						background: gray;
						color: white;
						font-size: 12px;
						display: none;
						}
			#yonghu p{text-align: left;}
		</style>
	</head>

	<body>

		<h2>图书管理系统<span id="gr">个人信息</span></h2>
		<div id="yonghu">
			<p>用户名：</p>
			<br />
			<button id="zx">注销</button>
		</div>
		<p><button id="tj">添加书籍</button>&nbsp;<button id="sx">刷新</button></p>
		<table border="1" cellspacing="0" cellpadding="">
			<th>封面</th>
			<th>书名</th>
			<th>作者</th>
			<th>类型</th>
			<th>原价</th>
			<th>会员价</th>
			<th>学院价</th>
			<th>出版社</th>
			<th>评分</th>
			<th>操作</th>
		</table>

		<div class="ys" id="xx">
			书&nbsp;&nbsp;&nbsp;名：<input type="text" name="name" id="xm" value="" /><br /> 作&nbsp;&nbsp;&nbsp;者：
			<input type="text" name="auther" id="zz" value="" /><br /> 出版社：
			<input type="text" name="press" id="cb" value="" /><br /> 分&nbsp;&nbsp;&nbsp;类：
			<input type="text" name="type" id="zl" value="" /><br /> 原&nbsp;&nbsp;&nbsp;价：
			<input type="text" name="price" id="yj" value="" /><br /> 会员价：
			<input type="text" name="vipprice" id="vj" value="" /><br /> 学院价：
			<input type="text" name="stuprice" id="sj" value="" /><br /> 评&nbsp;&nbsp;&nbsp;分：
			<input type="text" name="grade" id="pf" value="" /><br /> 封&nbsp;&nbsp;&nbsp;面：
			<input type="text" name="img" id="fm" value="" /><br />
			<br />
			<br />
			<button id="yes">确定</button>
			<button id="no">取消</button>
		</div>
		<div class="ys" id="xg">
			书&nbsp;&nbsp;&nbsp;名：<input type="text" name="name" id="aa" value="" /><br /> 作&nbsp;&nbsp;&nbsp;者：
			<input type="text" name="auther" id="bb" value="" /><br /> 出版社：
			<input type="text" name="press" id="cc" value="" /><br /> 分&nbsp;&nbsp;&nbsp;类：
			<input type="text" name="type" id="dd" value="" /><br /> 原&nbsp;&nbsp;&nbsp;价：
			<input type="text" name="price" id="ee" value="" /><br /> 会员价：
			<input type="text" name="vipprice" id="ff" value="" /><br /> 学院价：
			<input type="text" name="stuprice" id="gg" value="" /><br /> 评&nbsp;&nbsp;&nbsp;分：
			<input type="text" name="grade" id="hh" value="" /><br /> 封&nbsp;&nbsp;&nbsp;面：
			<input type="text" name="img" id="ii" value="" /><br />
			<br />
			<br />
			<button id="xyes">确定</button>
			<button id="xno">取消</button>
		</div>
	</body>
	<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//出现
		$("#tj").on("click", function() {
				$("#xx").slideDown("nomal")
			})
			//消失
		$("#no").on("click", function() {
				$("#xx").slideUp("nomal")
			})
		//页面加载完成后调取数据库的值
		$(window).on("load",function(){
			$.get("http://localhost:1200/books", function(abc){
				var arr = abc
				for (var i = 0; i < arr.length; i++) {
					$("<tr><td><img src=" + arr[i].img + "/></td><td>" + arr[i].name + "</td><td>" + arr[i].auther + "</td><td>" + arr[i].type + "</td><td>" + arr[i].price + "</td><td>" + arr[i].vipprice + "</td><td>" + arr[i].stuprice + "</td><td>" + arr[i].press + "</td><td>" + arr[i].grade + "</td><td><button class='delete'>删除</button><span class='yc'>" + arr[i].id + "</span><button class='xiugai'>修改</button></td></tr>").appendTo($("tbody"))
					}
				shanchu()
				xiugai()
				})			
			})
//		var bol=false;
//		if(){
//				bol==false;
//			}else{
//				bol==true;
//			}
			//添加
		$("#yes").on('click', function() {
			if($("#xx input").val()==""){
				alert("信息填写不完整")
			}else{			
			var xx = {
				name: xm.value,
				auther: zz.value,
				press: cb.value,
				type: zl.value,
				price: yj.value,
				vipprice: vj.value,
				stuprice: sj.value,
				img: fm.value,
				grade: pf.value
			}
			$.post("http://localhost:1200/books", xx, function(data) {
				
				//				console.log(data)
				$("<tr><td><img src=" + data.img + "/></td><td>" + data.name + "</td><td>" + data.auther + "</td><td>" + data.type + "</td><td>" + data.price + "</td><td>" + data.vipprice + "</td><td>" + data.stuprice + "</td><td>" + data.press + "</td><td>" + data.grade + "</td><td><button class='delete'>删除</button><span class='yc'>" + data.id + "</span><button class='xiugai'>修改</button></td></tr>").appendTo($("tbody"))
				shanchu()
				xiugai()
			})
			//添加之后让value为空
			$("#xx input").val("")
			$("#xx").slideUp("nomal")
			//调取删除函数
			
			}
		});

		//刷新
		$("#sx").on('click', function() {
			//			console.log(1)
			$("tbody td").remove()
			//通过获取数据库中的信息，来创建tr,并且添加内容
			$.get("http://localhost:1200/books", function(abc) {
				var arr = abc
				for (var i = 0; i < arr.length; i++) {
					$("<tr><td><img src=" + arr[i].img + "/></td><td>" + arr[i].name + "</td><td>" + arr[i].auther + "</td><td>" + arr[i].type + "</td><td>" + arr[i].price + "</td><td>" + arr[i].vipprice + "</td><td>" + arr[i].stuprice + "</td><td>" + arr[i].press + "</td><td>" + arr[i].grade + "</td><td><button class='delete'>删除</button><span class='yc'>" + arr[i].id + "</span><button class='xiugai'>修改</button></td></tr>").appendTo($("tbody"))
				}
				//调取删除函数
				shanchu()
				xiugai()
			})
		})
		//删除函数
		function shanchu(){
			$(".delete").on('click', function(){
					//删除整行
					console.log(1)
					$(this).parent().parent().remove();
					var x=$(this).next().html();
					//删除数据
					$.ajax({
						url: "http://localhost:1200/books/"+x,
						type: "delete",
						success: function(aaa) {
							console.log(aaa)							
						},
						error: function(err) {
							console.log(err)
						}
					})
				})
			}
		//修改
		function xiugai(){
			$(".xiugai").on("click",function(){
				$("#xg").slideDown("nomal");
				$("#xx").slideUp("nomal");
				console.log(1)
				var z=$(this).prev().html();
//				console.log($(this).parents("tr").children().eq(0).html())
				$.ajax({
					url: "http://localhost:1200/books/"+z,
					type:"get",
					success:function(data){
						console.log(data)
						$("#xg input").eq(0).val(data.name);
						$("#xg input").eq(1).val(data.auther);
						$("#xg input").eq(2).val(data.press);
						$("#xg input").eq(3).val(data.type);
						$("#xg input").eq(4).val(data.price);
						$("#xg input").eq(5).val(data.vipprice);
						$("#xg input").eq(6).val(data.stuprice);
						$("#xg input").eq(7).val(data.grade);
						$("#xg input").eq(8).val(data.img);
					}
				})
				var that=this
				$("#xyes").on('click', function(){
					var zz = {
						name: aa.value,
						auther: bb.value,
						press: cc.value,
						type: dd.value,
						price: ee.value,
						vipprice: ff.value,
						stuprice: gg.value,
						img: ii.value,
						grade: hh.value
					}
//					var a=$(that).next().html();
//					console.log(a)
					$.ajax({
						url: "http://localhost:1200/books/"+z,
						type: "put",
						data:zz,
						success: function(data) {
							$(that).parents("tr").replaceWith($("<tr><td><img src=" + data.img + "/></td><td>" + data.name + "</td><td>" + data.auther + "</td><td>" + data.type + "</td><td>" + data.price + "</td><td>" + data.vipprice + "</td><td>" + data.stuprice + "</td><td>" + data.press + "</td><td>" + data.grade + "</td><td><button class='delete'>删除</button><span class='yc'>" + data.id + "</span><button class='xiugai'>修改</button></td></tr>"))
//						console.log(aaa)
							xiugai()						
						},
						error: function(err) {
							console.log(err)
						}
					})
				})
				$("#xno").on("click",function(){
					$("#xg").slideUp("nomal")
				})
				shanchu()			
			})			
		}
		//用户/注销
		$("#gr").on("click",function(){
			$("#yonghu").slideToggle()
			var name=localStorage.getItem("name")
			$("#yonghu p").html("用户名："+name)
		})
		$("#zx").on("click",function(){
			localStorage.clear()
			location.href="loading.html"
		})
	</script>

</html>